<script setup>
function edit_server(id) {
    console.log(id)
}
function delete_server(id) {
    console.log(id)
}
function create_server(id) {
    console.log(id)
}
</script>
<template>
    <div class="ip_page">
        <div class="create" @click="create_server(1)">新增</div>
        <ul>
            <li>
                <div>server 1</div>
                <div>ip 102.18.198.2</div>
                <div class="delete_css" @click="edit_server(1)">修改</div>
                <div class="delete_css" @click="delete_server(4)">删除</div>
            </li>
            <li>
                <div>server 2</div>
                <div>ip 102.18.198.2</div>
                <div class="delete_css" @click="edit_server(1)">修改</div>
                <div class="delete_css" @click="delete_server(4)">删除</div>
            </li>
            <li>
                <div>server 3</div>
                <div>ip 102.18.198.2</div>
                <div class="delete_css" @click="edit_server(1)">修改</div>
                <div class="delete_css" @click="delete_server(4)">删除</div>
            </li>
            <li>
                <div>server 4</div>
                <div>ip 102.18.198.2</div>
                <div class="delete_css" @click="edit_server(1)">修改</div>
                <div class="delete_css" @click="delete_server(4)">删除</div>
            </li>
            <li>
                <div>server 5</div>
                <div>ip 102.18.198.2</div>
                <div class="delete_css" @click="edit_server(1)">修改</div>
                <div class="delete_css" @click="delete_server(4)">删除</div>
            </li>
        </ul>
    </div>
</template>


<style scoped>
.ip_page {
    width: 100%;
    background: linear-gradient(300deg, #ffffff 0%, #07070763 100%);
    height: 100vh;
}

.create {
    padding: 20px;
    border: 1px solid green;
    text-align: center;
    user-select: none;

}

ul {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.delete_css {
    border-radius: 10px;
    width: 100%;
    text-align: center;
}
.delete_css:hover {
    background-color: azure;
}


li {
    user-select: none;
    width: 350px;
    padding: 15px;
    margin: 0;
    border: 1px #ccc solid;
    list-style: none;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
}

li:hover {
    background-color: rgba(243, 233, 233, 0.699);
}
</style>